<mat-card class="page-title">
    <span>配置数据</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <input name="search" type="text" class="form-control" placeholder="搜索" [(ngModel)]="filter" style="width:200px">
    </div>
</mat-card>

<mat-card>
    <div *ngIf="allConfiguration && configuration">
        <label>Spring配置</label>
        <table class="table table-striped table-bordered table-responsive d-table">
            <thead>
            <tr>
                <th class="w-40" (click)="orderProp = 'prefix'; reverse=!reverse"><span>Prefix</span></th>
                <th class="w-60" (click)="orderProp = 'properties'; reverse=!reverse"><span>Properties</span></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let entry of (configuration | pureFilter:filter:'prefix' | orderBy:orderProp:reverse)">
                <td><span>{{entry.prefix}}</span></td>
                <td>
                    <div class="row" *ngFor="let key of keys(entry.properties)">
                        <div class="col-md-4">{{key}}</div>
                        <div class="col-md-8">
                            <span class="float-right badge badge-secondary break">{{entry.properties[key] | json}}</span>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div *ngFor="let key of keys(allConfiguration)">
            <label><span>{{key}}</span></label>
            <table class="table table-sm table-striped table-bordered table-responsive d-table">
                <thead>
                <tr>
                    <th class="w-40">Property</th>
                    <th class="w-60">Value</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of allConfiguration[key]">
                    <td class="break">{{item.key}}</td>
                    <td class="break">
                        <span class="float-right badge badge-secondary break">{{item.val}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</mat-card>

